<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>Vue 事件修饰符示例</title>
        <script src="js/vue.global.js"></script>
    </head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            padding: 10px;
        }
        .box div {
            width: 50%;
            height: 50%;
            border: 1px solid red;
            margin: 10px;
            padding: 10px;
        }
    </style>
    <body>
        <div id="app">
            <!-- 事件冒泡示例 -->
            <div @click="f(1)">
                div1
                <div @click="f(2)">
                    div2
                    <div @click="f(3)">div3</div>
                </div>
            </div>
            <hr>

            <!-- 事件修饰符示例 -->
            <div @click.self.once="f(1)" class="box">
                div1 (self + once)
                <div>
                    div2
                    <div @click.right.prevent="f(3)">div3 (right + prevent)</div>
                </div>
            </div>
            <hr>

            <!-- 阻止默认行为示例 -->
            <a @click.prevent="f(4)" href="shopcar.html">购物车 (prevent)</a>
            <hr>

            <!-- 事件捕获示例 -->
            <div @click.capture="f(1)" class="box">
                div1 (capture)
                <div @click="f(2)">
                    div2
                    <div @click="f(3)">div3</div>
                </div>
            </div>
            <hr>

            <!-- 阻止事件冒泡示例 -->
            <div @click="f(1)" class="box">
                div1
                <div @click.stop="f(2)">
                    div2 (stop)
                    <div @click="f(3)">div3</div>
                </div>
            </div>
            <hr>

            <!-- passive 示例 -->
            <div @scroll.passive="onScroll" class="box" style="overflow: auto;">
                <div style="height: 500px;">滚动区域 (passive)</div>
            </div>
        </div>
        <script>
            Vue.createApp({
                data() {
                    return {};
                },
                methods: {
                    f(i) {
                        alert('这是 div' + i);
                    },
                    onScroll() {
                        console.log('滚动事件触发');
                    }
                }
            }).mount('#app');
        </script>
    </body>
</html>